<template>
	<view class="product">
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">{{ title ? title : '产品列表' }}</block>
		</cu-custom>
		<view class="search">
			<search-pro @search="searchList"></search-pro>
		</view>		
		<view class="tabs">	
			<view v-for="(item, i) in tabs" :key="i" :class="{ act: currentTab === i }" @tap="change(i, item.type)">
				<text :class="{ up: params.order === 3, down: params.order === 4 }">{{ item.name }}</text>
			</view>
		</view>
		<view class="box">
			<scroll-view scroll-y v-if="list.length" @scrolltolower="loadmore">
				<view class="list">
					<view class="item" v-for="(item, i) in list" :key="i">
						<navigator :url="'/pages/orders/productinfo?pid='+item.id" hover-class="none">
							<image :src="item.default_imgurl" @error="ImageError(i)"></image>
						</navigator>
						<view class="desc">
							<view class="title">{{ item.name }}</view>
							<view class="price">
								<view class="now text-price">{{ item.now_price }}</view>
								<view class="origin text-price">{{ item.orgin_price }}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<empty-data v-else>没有找到相关产品</empty-data>			
		</view>
	</view>
	
</template>

<script>
	import { searchList } from '@/common/api/users'
	import searchPro from '@/components/search'
	export default {
		name: 'productlist',
		components: { searchPro },
		data () {
			return {
				noData: false,
				currentTab: 0,
				list: [],
				title: '',
				tabs: [
					{ name: '全部', type: 1 },
					{ name: '销量', type: 2 },
					{ name: '价格', type: [3, 4] }					
				],
				params: {
					pages: 1,
					order:1,
					search: '',
					type_id: ''
				}
			}
		},
		onLoad(options) {
			if (options.keyword) this.params.search = options.keyword
			if (options.id) this.params.type_id = options.id
			if (options.title) this.title = options.title
			this.getList()
		},
		watch: {
			'params.order' (val, oldval) {
				this.params.pages = 1
				this.list = []
				this.getList()
			}
		},
		methods: {
			searchList (key) {
				this.list = []
				this.params.search = key
				this.params.pages = 1
				this.getList()
			},
			getList () {
				uni.showLoading({ mask: true })
				searchList(this.params).then(res => {
					uni.hideLoading()
					if (res.length) {
						this.list = [...this.list, ...res]
					} else {
						if (this.params.pages !== 1) {
							this.noData = true
							uni.showToast({
								icon: 'none',
								title: '没有更多产品了'
							})
						}
					}
				})
			},
			loadmore () {
				if (!this.noData) {
					this.params.pages++
					this.getList()					
				}
			},
			change(e, type) {
				this.currentTab = e
				if (typeof type === 'number') {
					this.params.order = type 
				} else {
					this.params.order === type[0] ? this.params.order = type[1] : this.params.order = type[0]
				}
			},
			ImageError (idx) {
				this.list[idx].default_imgurl = '/static/error.png'
			}
		}
	}
</script>

<style lang="less">
@import '../../common/styles/variables.less';
.fixedBody;
.product {
	height: 100%;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	flex-flow: column;	
	& > .search {
		.border-bottom;
	}	
	& > .tabs {
		height: @height;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0 15upx;
		background-color:white;
		.border-bottom;
		& > view {
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			font-size:@minSize;
			position: relative;
			white-space: nowrap;
			&::after {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				content: '';
				border-top: 4upx solid @red;
				transform: scaleX(0);
				will-change: transform;
				transition-duration: .2s;
			}
			&.act {
				font-size: 24upx;
				font-weight: 600;
				&::after {
					transform: scaleX(.5)
				}
			}
			&:nth-of-type(3) {
				& > text {
					position: relative;
					&.up {
						&::after {
							border-bottom-color: @red;
						}
					}
					&.down {
						&::before {
							border-bottom-color: @red;
						}
					}
					&::after, &::before {
						position: absolute;
						content:  '';
						width: 0;
						height: 0;
						right: -22upx;
						border-left: 8upx solid transparent;
						border-right: 8upx solid transparent;
						border-bottom: 14upx solid #cacaca;
					}					
					&::after {
						top: 50%;
						transform: translate3d(0,-115%,0);
					}
					&::before {
						bottom: 50%;
						transform: rotate(180deg) translate3d(0,-115%,0);
					}
				}
			}
		}
	}
	& > .box {
		flex: 1;
		position: relative;
		overflow: hidden;
		background-color: white;
		scroll-view {
			height: 100%;
			.list {
				display: flex;
				flex-wrap: wrap;
				background-color: white;
				padding: 15upx 15upx 0;
				.item {
					width: 50%;
					box-sizing: border-box;
					&:nth-of-type(2n+1) {
						padding: 0 20upx 20upx 0;
					}
					navigator {
						height: 340upx;
						width: 100%;
						image {
							display: block;
							width: 100%;
							height: 100%;
						}
					}
					.desc {
						.title {
							font-size:@medium;
							.twoLine(2);
							margin: 10upx 0;
						}
						.price {
							display: flex;
							align-items: center;
							.now {
								font-size:@medium;
								color:@red;
								font-weight: 600;
								margin-right: 20upx;
							}
							.origin {
								font-size: @minSize;
								color: @gray;
								text-decoration: line-through;
							}
						}
					}
				}
			}
		}
	}
}	
</style>
